import React, { useState, useEffect, } from "react";
import { Card, Row, Col, Space, Button } from 'antd'
import { connect, history } from 'umi';
import './index.less'
const SelectStage = (props) => {
    const { dispatch, onChange, defaultValue, keys = 'stage', fatherKeys, selectType, queryFor } = props
    const { location = {} } = history
    const { query = {}, } = location
    const { linkType } = query
    const [active, setActive] = useState('')
    const [dataActive, setDataActive] = useState('')
    const [stage, setStage] = useState([])
    useEffect(() => {
        if (!defaultValue) {
            setActive('')
            setDataActive('')
        }
    }, [defaultValue])
    useEffect(() => {
        if (linkType === 'my') {
            setActive(query.mainStage)
            setDataActive(query.stage)
        }
    }, [])
    useEffect(() => {
        if (active !== null) {
            if (selectType === 'default') {
                onChange && onChange({
                    [keys]: dataActive === active ? '' : dataActive,
                    [fatherKeys]: active
                })
            }
            else {
                onChange && onChange({
                    [keys]: dataActive
                })
            }

        }
    }, [dataActive])
    const fetchData = () => {
        dispatch({
            type: 'user/fetchListStageInfoBase',
            payload: {
                queryFor
            },
            callback: (e = []) => {
                const { stageInfoList = [] } = e
                console.log(stageInfoList, 'stageInfoList----------')
                setStage([{
                    stageInfo: {
                        baseStageFlag: "1",
                        mainStage: "",
                        stageColor: "#2363F5",
                        stageIdentification: "",
                        stageIndex: 0,
                        stageName: "全部",
                    }
                }, ...stageInfoList])
            }
        })
    }
    useEffect(() => {
        fetchData()
    }, [])
    function hexToRGBA(hex, opacity) {
        // 清理 HEX 值
        if (!hex) {
            return
        }
        let cleanHex = hex.replace('#', '');

        // 处理简写格式 (如 #FFF)
        if (cleanHex.length === 3) {
            cleanHex = cleanHex.split('').map(char => char + char).join('');
        }

        // 验证 HEX 格式
        if (!/^[0-9A-F]{6}$/i.test(cleanHex)) {
            throw new Error('Invalid HEX color format');
        }

        // 限制透明度范围 (0~1)
        const clampedOpacity = Math.min(1, Math.max(0, opacity));

        // 提取 RGB 值
        const r = parseInt(cleanHex.substring(0, 2), 16);
        const g = parseInt(cleanHex.substring(2, 4), 16);
        const b = parseInt(cleanHex.substring(4, 6), 16);

        return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
    }

    const stageStyle = (index) => {
        if (index === 0) {
            return 'SelectStage_clip_path'
        }
        return 'SelectStage_clip_pathLast'
    }
    const stageStyleChild = (index) => {
        if (index === 0) {
            return 'SelectStage_clip_pathChild'
        }
        return 'SelectStage_clip_pathChildLast'
    }
    const handleTabUpdate = (data) => {
        console.log(data, 'data')
        setDataActive(data.stageIdentification)
        setActive(data.stageIdentification)
    }
    const handleTabUpdateChildren = (data) => {
        setDataActive(data.stageIdentification)
    }
    return <div>
        <div style={{ width: '100%', gridTemplateColumns: `repeat(${stage.length}, 1fr)` }} className="SelectStage_box">
            {stage.map((val, index) => {
                const { stageInfo = {} } = val
                const { stageColor, stageName, stageIdentification } = stageInfo
                if (index === 0 || index === stage.length - 1) {
                    return <div onClick={() => {
                        handleTabUpdate(stageInfo)
                    }} className="SelectStage_content_box">

                        <div style={{ background: active === stageIdentification ? hexToRGBA(stageColor, 1) : hexToRGBA(stageColor, 0.5) }} className={`SelectStage_list_box ${stageStyle(index)}`}>
                            {active === stageIdentification ? <div style={{ color: stageColor }} className="StageConfigurationSetting_active_check">✓</div> : null}
                            <div>
                                {stageName}
                            </div>
                        </div>
                    </div>
                }
                return <div onClick={() => {
                    handleTabUpdate(stageInfo)
                }} className="SelectStage_content_box">
                    <div style={{ background: active === stageIdentification ? hexToRGBA(stageColor, 1) : hexToRGBA(stageColor, 0.5), }} className={'SelectStage_list_box'}>
                        {active === stageIdentification ? <div style={{ color: stageColor }} className="StageConfigurationSetting_active_check">✓</div> : null}
                        <div>
                            {stageName}
                        </div>
                    </div>
                </div>
            })}

        </div>
        {selectType === 'default' ?
            <div className="SelectStage_list_itemBox">
                {stage.map((val, index) => {
                    const { subStageInfoList = [] } = val
                    const { stageInfo = {} } = val
                    const { stageColor, stageName, stageIdentification } = stageInfo
                    if (subStageInfoList.length > 0 && stageIdentification === active) {
                        return <div style={{ background: hexToRGBA(stageColor, 0.1), }} className={'SelectStage_list_item'}>
                            <div onClick={() => {
                                setDataActive(active)
                            }} style={{ color: active === stageIdentification && dataActive === active ? '#FFFFFF' : '#65676C', background: stageIdentification && dataActive === active ? stageColor : '#ffffff' }} className="SelectStage_tag_box">全部</div>
                            {subStageInfoList.map(value => {
                                return <div onClick={() => {
                                    setActive(stageIdentification)
                                    handleTabUpdateChildren(value)
                                }} style={{ background: dataActive === value.stageIdentification ? stageColor : '#ffffff', color: dataActive === value.stageIdentification ? '#FFFFFF' : '#65676C' }} className="SelectStage_tag_box">{value.stageName}</div>

                            })
                            }
                        </div>
                    }
                    else {
                        return null
                    }

                })}

            </div> : null}

    </div>
}
export default connect(({ loading }) => ({
    loading
}))(SelectStage);
